<template>
  <div>
    <div :class="{'fixed-header':fixedHeader&&fixed,'fixedRadioBtn':fixed}" class="radioBtn">
      <el-radio-group v-model="radio">
        <el-radio-button v-for="(item, index) in option" :key="index" :label="optionValue?item[optionValue]:item">{{ item[optionLabel]||item }}</el-radio-button>
      </el-radio-group>
    </div>
    <div v-if="fixed" style="height:68px" />
  </div>
</template>

<script>
export default {
  name: 'RadioBtn',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: null,
    option: Array,
    optionLabel: {
      type: String,
      default: 'label'
    },
    optionValue: {
      type: String,
      default: 'value'
    },
    fixed: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      radio: this.value
    }
  },
  computed: {
    fixedHeader() {
      return this.$store.state.settings.fixedHeader
    }
  },
  watch: {
    radio(val) {
      this.$emit('change', val)
    },
    value(val) {
      this.radio = val
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
@import "~@/styles/variables.scss";
.radioBtn{
  padding: 8px;
}
.fixedRadioBtn{
  padding: 8px;
  position: fixed;
  top: 100px;
  // right: 0;
  width: calc(100vw - #{$sideBarWidth});
  transition: width 0.28s;
  z-index: 50;
  background: #f0f2f5;
}
/deep/ .el-radio-button__inner{
  min-width: 120px;
  box-sizing: border-box;
  border-radius:2px !important;
  border: 1px solid $border_color;/*no*/
}
/deep/ .el-radio-button{
  margin: 6px 12px 6px 0;
}
.hideSidebar .fixed-header {
  width: calc(100vw - 54px);
}
.mobile .fixed-header {
  width: 100vw;
}
</style>

